import { ScrollView, StyleSheet, Text, View } from "react-native";
import React from 'react'
import { LinearGradient } from "expo-linear-gradient";
import AFFIRMATION_GALLERY from "@/constants/affirmation-gallary";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import GuidedAffirmationsGallery from "@/components/GuidedAffirmationsGallery";

const affirmations = () => {
  const insets = useSafeAreaInsets();
  return (
    <View className="flex-1">
    <LinearGradient
        // Background Linear Gradient
        colors={["#2e1f58", "#54426b", "#a790af"]}
        className="px-5"
        style={{ paddingTop: insets.top }}
    >
        <ScrollView showsVerticalScrollIndicator={false}>
            <Text className="text-zinc-50 text-3xl font-bold">
            用肯定改变你的信念
            </Text>
            <View>
                {AFFIRMATION_GALLERY.map((g) => (
                    <GuidedAffirmationsGallery
                        key={g.title}
                        title={g.title}
                        products={g.data}
                    />
                ))}
            </View>
        </ScrollView>
    </LinearGradient>
    {/* <StatusBar style="light" /> */}
</View>
  )
}

export default affirmations